    <style include="cr-shared-style settings-shared">
      .cr-row-no-top-gap {
        margin-bottom: var(--cr-section-vertical-margin);
        min-height: auto;
      }
      .preview-box {
        all: initial;
        align-items: center;
        background-image:
          url(chrome://theme/IDR_ACCESSIBILITY_CAPTIONS_PREVIEW_BACKGROUND);
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        margin: var(--cr-section-padding);
        margin-inline-start: var(--cr-section-indent-padding);
        min-height: 112px;
        padding: 20px;
        text-align: center;
      }
    </style>
    <template is="dom-if" if="[[enableLiveCaption_]]">
      <settings-live-caption prefs="{{prefs}}"></settings-live-caption>
    </template>
    <div class="cr-row">
      <h2 class="start">$i18n{captionsPreferencesTitle}</h2>
    </div>
    <div class="cr-row first cr-row-no-top-gap">
      <div class="start">$i18n{captionsPreferencesSubtitle}</div>
    </div>
    <div class="preview-box">
      <span style="
          font-size:[[prefs.accessibility.captions.text_size.value]];
          font-family:[[getFontFamily_(
              prefs.accessibility.captions.text_font.value)]];
          background-color: [[computeBackgroundColor_(
              prefs.accessibility.captions.background_opacity.value,
              prefs.accessibility.captions.background_color.value)]];
          color: [[computeTextColor_(
              prefs.accessibility.captions.text_opacity.value,
              prefs.accessibility.captions.text_color.value)]];
          text-shadow: [[prefs.accessibility.captions.text_shadow.value]];
          padding: [[computePadding_(
              prefs.accessibility.captions.text_size.value)]]">
        $i18n{quickBrownFox}
      </span>
    </div>
    <div class="list-frame">
      <div class="list-item underbar first">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextSize}
        </div>
        <settings-dropdown-menu id="captionsTextSize"
            label="$i18n{captionsTextSize}"
            pref="{{prefs.accessibility.captions.text_size}}"
            menu-options="[[textSizeOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextFont}
        </div>
        <settings-dropdown-menu id="captionsTextFont"
            label="$i18n{captionsTextFont}"
            pref="{{prefs.accessibility.captions.text_font}}"
            menu-options="[[textFontOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextColor}
        </div>
        <settings-dropdown-menu id="captionsTextColor"
            label="$i18n{captionsTextColor}"
            pref="{{prefs.accessibility.captions.text_color}}"
            menu-options="[[colorOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextOpacity}
        </div>
        <settings-dropdown-menu id="captionsTextOpacity"
            label="$i18n{captionsTextOpacity}"
            pref="{{prefs.accessibility.captions.text_opacity}}"
            menu-options="[[textOpacityOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextShadow}
        </div>
        <settings-dropdown-menu id="captionsTextShadow"
            label="$i18n{captionsTextShadow}"
            pref="{{prefs.accessibility.captions.text_shadow}}"
            menu-options="[[textShadowOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsBackgroundColor}
        </div>
        <settings-dropdown-menu id="captionsBackgroundColor"
            label="$i18n{captionsBackgroundColor}"
            pref="{{prefs.accessibility.captions.background_color}}"
            menu-options="[[colorOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsBackgroundOpacity}
        </div>
        <settings-dropdown-menu id="captionsBackgroundOpacity"
            label="$i18n{captionsBackgroundOpacity}"
            pref="{{prefs.accessibility.captions.background_opacity}}"
            menu-options="[[backgroundOpacityOptions_]]">
        </settings-dropdown-menu>
      </div>
    </div>
